<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.List,java.util.Map;" %>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %> 
<style>
.tab-content{border:1px solid #ddd;border-top:none;background:#fff;text-align:center;}
</style>
<script src="<%=request.getContextPath()%>/WIDGETS/js/libs/Chart.js"></script>

<ul class="nav nav-tabs">
	<c:forEach var="c" items="${charts }"  varStatus="status">
	
	<li <c:if test="${status.index eq 0 }"> class="active" </c:if>>
	<a href="#chart-${status.index }" data-toggle="tab">${c.title }</a>
	</li>
	</c:forEach>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<c:forEach var="c" items="${charts }"  varStatus="status">
	
	<div class='tab-pane <c:if test="${status.index eq 0 }">active</c:if>' id="chart-${status.index }">
		<canvas width="800" height="400"></canvas>
	</div>
	</c:forEach>
</div>
<%="<script>$().ready(function(){"%>
<c:forEach var="c" items="${charts }"  varStatus="status">
	(function(){
		var keys = ${c.keys };
		var l = keys.length;
		var values = ${c.values };
		var v = values[0];
		var d = [];
		for(var i = 0 ;i < l;i++){
			d[i] = v[keys[i]];
		}
		console.log(d);
		var data = {
			labels : ${c.labels },
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					data : d
				}
			]
		};
		var ctx = $("#chart-${status.index } canvas").get(0).getContext("2d");
		new Chart(ctx).${c.type }(data);
	})();
</c:forEach>
<%="});</script>"%>
<%--
	var data = {
		labels : ["January","February","March","April","May","June","July"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data : [65,59,90,81,56,55,40]
			}
		]
	};
	var ctx = $("#chart1 canvas").get(0).getContext("2d");
	new Chart(ctx).Line(data);
	 --%>
